import React, {
    Component,
} from 'react'
import { connect } from 'react-redux';
import { View, Text, Image, StyleSheet, TouchableOpacity } from 'react-native'
import { SafeAreaView } from 'react-navigation'
import { NavigationHeader, PetItem, WhitePage } from '../../components';
import { ActionTypes } from '../../constants'
const ScrollableTabView = require('react-native-scrollable-tab-view')

class MyPet extends Component {

    static propTypes = {

    };

    // 生命周期
    constructor(props) {
        super(props)
        this.state = {

        }
    }

    componentDidMount() {
        // this._fetchPetList()
    }

    // render part
    render() {
        console.log('petList',this.props.petList);
        
        return (
            <SafeAreaView
                style={{ backgroundColor: '#fff', flex: 1}}
            >
                <NavigationHeader
                    title='我的宠物'
                    rightButton={this._renderRightButton()}
                    navigation={this.props.navigation}
                />
                <View style={{ backgroundColor: '#e0e0e0', flex: 1 }}>
                    {this._renderPetListView()}
                    {/* <ScrollableTabView
                        tabBarUnderlineStyle={{
                            backgroundColor: '#fff'
                        }}
                        tabBarBackgroundColor='#6a88fc'
                        tabBarTextStyle={{
                            color: '#fff'
                        }}
                    >
                        <PetItem
                            tabLabel="test1"
                        />
                        <PetItem
                            tabLabel="test2"
                        />
                    </ScrollableTabView> */}
                </View>
            </SafeAreaView>
        )
    }

    _renderRightButton() {
        return (
            <TouchableOpacity
                style={{ width: '100%', justifyContent: 'flex-end'}}
                onPress={() => {
                    this.props.navigation.navigate('AddPet')
                }}
            >
                <Text style={{
                    textAlign: 'right'
                }}>添加</Text>
            </TouchableOpacity>
        )
    }

    _renderPetListView() {
        if (this.props.petList.length === 0) return <WhitePage />
        return (
            <ScrollableTabView
                tabBarUnderlineStyle={{
                    backgroundColor: '#fff'
                }}
                tabBarBackgroundColor='#6a88fc'
                tabBarTextStyle={{
                    color: '#fff'
                }}
            >

                {this.props.petList.map((value, index) => {
                    console.log('value', value)
                    return <PetItem
                        tabLabel={value.name}
                        key={index}
                        item={value}
                    />
                })}
            </ScrollableTabView>
        )
    }

    _fetchPetList() {
        const { id } = this.props.user || {}
        const data = {
            uid: id
        }
        const callBack = this._fetchFinish.bind(this)
        actionUtil(ActionTypes.API_GET_PETS_BY_USER_ID, { data, callBack })
    }

    _fetchFinish() {
        
    }
}

const styles = StyleSheet.create({

})

export default connect(state => ({
    petList: state.pet.petList,
    user: state.user.user
})
)(MyPet)